﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true"
    CodeBehind="Create.aspx.cs" Inherits="WoodbaseVideoRental.Pages.Movies.Create"
    EnableEventValidation="false" ValidateRequest="false" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="LeftSide" runat="server">
    <asp:Xml ID="movieMenu" DocumentSource="~/Data/MovieMenu.xml" TransformSource="~/Styles/XSLT/SimpleLeftMenu.xslt"
        runat="server" />
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
    <table class="topalign">
        <tr>
            <td>
                Title
            </td>
            <td>
                <asp:TextBox runat="server" ID="txbTitle" />
            </td>
        </tr>
        <tr>
            <td>
                Runtime
            </td>
            <td>
                <asp:TextBox ID="txbRuntime" runat="server" />
            </td>
        </tr>
        <tr>
            <td>
                Production year
            </td>
            <td>
                <asp:DropDownList runat="server" ID="ddlYear" CssClass="normalinput" />
            </td>
        </tr>
        <tr>
            <td>
                Genres
                <img src="/Images/design/edit.png" alt="Add genre" id="icoAddGenre" />
            </td>
            <td>
                <asp:ListBox runat="server" SelectionMode="Multiple" ID="lbxGenres" CssClass="normalinput multiselect" />
            </td>
        </tr>
        <tr>
            <td>
                Actors
                <img src="/Images/design/edit.png" alt="Add actor" id="icoAddActor" />
            </td>
            <td>
                <asp:ListBox runat="server" ID="lbxActors" SelectionMode="Multiple" CssClass="multiselect" />
            </td>
        </tr>
        <tr>
            <td colspan="2" class="right">
                <asp:Button runat="server" ID="btnCreateMovie" Text="Create" OnClientClick="javascript:return generateContent();"
                   OnClick="btnCreateMovie_Click" />
            </td>
        </tr>
    </table>
    <asp:TextBox runat="server" ID="newActorsList" CssClass="hidden" />
    <asp:TextBox runat="server" ID="selectedGenres" CssClass="hidden" />
    <script type="text/javascript">
        var actorList = new Array();
        function generateContent() {
            var selectedGenres = $("#ctl00_MainContent_lbxGenres option:selected");
            var gArr = new Array();
            for (var i = 0; i < selectedGenres.length; i++) {
                gArr.push(selectedGenres[i].value);
            }
         
            $("#ctl00_MainContent_selectedGenres").val(JSON.stringify(gArr));
            $("#ctl00_MainContent_newActorsList").val(JSON.stringify(actorList));
            return true;
        }

        $(document).ready(function () {
            $(".multiselect").multiselect();
            $("#icoAddGenre").fancybox({ content: $("#createGenreContent").html() });
            $("#icoAddActor").fancybox({ content: $("#createActorContent").html() });
        });

        $("#btnGenreCreate").live("click", function () {
            var genreName = $("#fancybox-inner").find("#txbGenreNamed").val();
            $("#ctl00_MainContent_lbxGenres").append("<option value='" + genreName + "' selected='selected'>" + genreName + "</option>");
            $("#ctl00_MainContent_lbxGenres").multiselect('destroy');
            $("#ctl00_MainContent_lbxGenres").multiselect();
            $.fancybox.close();
        });

        $("#btnActorCreate").live("click", function () {
            var actorArray = $("#fancybox-inner :input").serializeArray();
            var myactor = new actor(actorArray[0].value, actorArray[1].value, actorArray[2].value, actorArray[3].value, actorArray[4].value);
            $("#ctl00_MainContent_lbxActors").append("<option value='" + actorArray[0].value + " " + actorArray[1].value + "'>" + actorArray[0].value + " " + actorArray[1].value + "</option>");
            actorList.push(myactor);
            $("#ctl00_MainContent_lbxActors").multiselect('destroy');
            $("#ctl00_MainContent_lbxActors").multiselect();
            $.fancybox.close();
        });

        function removeItem(obj) {
            alert($("#" + obj).html());
            $("#" + obj).remove();
        }
    </script>
    <div class="alternateContent" style="display: none;">
        <!-- Form for creating new genre -->
        <div id="createGenreContent">
            <h2>
                Create genre</h2>
            <table>
                <tr>
                    <td>
                        Name
                    </td>
                    <td>
                        <input type="text" id="txbGenreNamed" />
                    </td>
                </tr>
                <tr>
                    <td class="right">
                        <input type="button" value="Add" id="btnGenreCreate" />
                    </td>
                </tr>
            </table>
        </div>
        <!-- Form for creating new actors -->
        <!-- The form will be submitted by a PageMethod -->
        <div id="createActorContent">
            <h2>
                Create actor</h2>
            <table>
                <tr>
                    <td>
                        Givenname
                    </td>
                    <td>
                        <input type="text" name="givenName" />
                    </td>
                </tr>
                <tr>
                    <td>
                        Lastname
                    </td>
                    <td>
                        <input type="text" name="lastName" />
                    </td>
                </tr>
                <tr>
                    <td>
                        Birthyear
                    </td>
                    <td>
                        <input type="text" name="birthyear" />
                    </td>
                </tr>
                <tr>
                    <td>
                        Nationality
                    </td>
                    <td>
                        <input type="text" name="nationality" />
                    </td>
                </tr>
                <tr>
                    <td>
                        Gender
                    </td>
                    <td>
                        Male<input type="radio" name="gender" value="1" />
                        Female<input type="radio" name="gender" value="0" />
                    </td>
                </tr>
                <tr>
                    <td class="right" colspan="2">
                        <input type="button" value="Add" id="btnActorCreate" />
                    </td>
                </tr>
            </table>
        </div>
    </div>
</asp:Content>
<asp:Content ContentPlaceHolderID="BottomContent" runat="server">
</asp:Content>
